<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入浅出</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div id="div1" style="width: 300px;height: 200px;background-color: orange"></div>

<button id="b1">淡入</button>
<button id="b2">浅出</button>
<button id="b3">淡入浅出</button>
<button id="b4">浅出到一定透明度</button>






<script>

    $("#b1").click(function () {

        $("#div1").fadeIn(1000);

    })

    $("#b2").click(function () {

        $("#div1").fadeOut(1000);
    })

    $("#b3").click(function () {

        $("#div1").fadeToggle(1000);
    })

    $("#b4").click(function () {

        $("#div1").fadeTo(1000,0.5);
    })


</script>




</body>



</html>